<!DOCTYPE html>
<html>
  <head>
    <title>爱迪梦|故事汇|播放</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="爱迪梦|故事汇">

    <link rel="stylesheet" href="../lib/weui.min.css">
    <link rel="stylesheet" href="../css/jquery-weui.css">
    <link rel="stylesheet" href="css/demos.css">

    <style>
      .swiper-container {
        width: 100%;
      } 

      .swiper-container img {
        display: block;
        width: 100%;
      }  
      /*唱片图片样式*/
      .my-flexgrid img{
        display:block;
        width:100%;
        height:100%;
      }
      .my-flexgrid{
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 50px;
        margin-left: 50px;
      }  
      .my-flexgrid-label{
        width:90%;
        margin:10px;
        display:block;
        text-align:center;
        color:#000000;
        font-size:20px;
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
      }   
        /*默认播放器样式*/
        .my-audio{
          width:100%;
          filter:alpha(Opacity=70);
          -moz-opacity:0.7;
          opacity: 0.7;
        }

        .my-play-control-button{
          margin:auto;
          width:90%;
          text-align: center;
        }
        .my-play-control-button img{
          margin-top: 5px;
          margin-bottom: 0px;
          margin-right: 8px;
          margin-left: 8px;
        }
        /*popup data scroll end*/
    </style>
  </head>

  <body ontouchstart>
<!-- AD begin -->
          <div class="swiper-container">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
              <!-- Slides -->
              <div class="swiper-slide"><img src="../ad/ad-1.png" /></div>
              <div class="swiper-slide"><img src="../ad/ad-2.png" /></div>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
          </div>
<!-- AD end -->
<div id="media-curr-play-name" class="my-flexgrid-label">沙漠骆驼 - 展展与罗罗</div>

<div class="my-flexgrid">
  <img src="images/avatar3.jpg" alt="">
</div>

<div class="my-play-control-button">
  <img id="media-loop-model-but" src="images/media-all-repeat.png" alt="循环模式">
  <img id="media-prev-but" src="images/media-skip-backward.png" alt="上一集">
  <img id="media-next-but" src="images/media-skip-forward.png" alt="下一集">
  <img id="media-playlist-but" src="images/media-playlist-repeat.png" alt="播放列表">
</div>
<!-- ======播放器===begin====== -->
<audio class="my-audio" controls="controls" autoplay="autoplay">
  <source src="沙漠骆驼 - 展展与罗罗.mp3" type="audio/mpeg">
  您的浏览器不支持播放器，请使用Chrome、Firefox、Safari、IE9+。
</audio>

<a id="hidden-but" href="#" class="open-popup" data-target="#full">
<div id="full" class='weui-popup__container'>
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <div class="toolbar">
          <div class="toolbar-inner">
            <a href="#" class="picker-button close-popup">关闭</a>
            <h1 class="title">播放列表</h1>
          </div>
        </div>
        <div id="my-popup-data" class="weui-cells weui-cells_radio">
          <label class="weui-cell weui-check__label">
            <div class="weui-cell__bd">
              <p></p>
            </div>
            <div class="weui-cell__ft">
              <span class="weui-icon-checked"></span>
            </div>
          </label>
            <!-- data -->
        </div>
      </div>
    </div>
<!-- ======播放器===end====== -->
<script type="text/javascript" charset="utf-8" src="../lib/jquery-2.1.4.js"></script>
<script type="text/javascript" charset="utf-8" src="../lib/fastclick.js"></script>
<!--
<script>
  $(function() {
    FastClick.attach(document.body);
  });
</script>
-->
<script type="text/javascript" charset="utf-8" src="../js/jquery-weui.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/swiper.js"></script>
<script>
      //=======AD loop====begin====
      $(".swiper-container").swiper({
        loop: true,
        autoplay: 3000
      });
      //=======AD loop====end====
      //=======player====begin====
      var playlist = ["沙漠骆驼 - 展展与罗罗.mp3","艾辰 - 可不可以.mp3","花姐 - 夜之光.mp3","叶洛洛 - 小了白了兔.mp3"];
      var currPlayIndex = 0;
      var prevPlayIndex = 0;
      var nextPlayIndex = 1;
      function doPlay(index){
        if(index < 0 || index >= playlist.length) index = 0;

        currPlayIndex = index;
        prevPlayIndex = (currPlayIndex == 0) ? (playlist.length - 1) : (currPlayIndex - 1);
        nextPlayIndex = currPlayIndex == playlist.length - 1 ? 0 : currPlayIndex + 1;
        $audio = $("audio");
        $audio.attr("src",playlist[currPlayIndex]);
        $("#media-curr-play-name").text(playlist[currPlayIndex]);
      }
      //=======player====end====
      //=======player loop model====begin====
      var loopModels = ["images/media-all-repeat.png","images/media-one-repeat.png","images/media-two-repeat.png"];
      var toIndex = 0;
      $("#media-loop-model-but").click(function(){
        var orgSrc = $(this).attr("src");
        $.each(loopModels,function(i,tmp){
          if(orgSrc == tmp){
            toIndex = ((i + 1)  >= loopModels.length) ? 0 : (i + 1);
          }
        });
        $(this).attr("src",loopModels[toIndex]);
      });
      //=======player loop model====end====
      //=======player prev====begin====
      $("#media-prev-but").click(function(){
        doPlay(prevPlayIndex);
      });
      //=======player prev====end====
      //=======player next====begin====
      $("#media-next-but").click(function(){
        doPlay(nextPlayIndex);
      });
      //=======player next====end====
      //=======player palylist====begin====
      $("#media-playlist-but").click(function(){
        var $poputData = $("#my-popup-data");
        //删除上次展开的playlist
        $poputData.children("label:not(:first)").remove();
        //弹出popup菜单
        $("#hidden-but").click();
        //加载playlist
        $.each(playlist,function(i,tmp){
          if(currPlayIndex == i){
            $poputData.append("<label class='weui-cell weui-check__label'><div class='weui-cell__bd'><p>"+tmp+"</p></div><div class='weui-cell__ft'><input type='radio' class='weui-check' name='radio1' checked='checked' value='"+tmp+"'><span class='weui-icon-checked'></span></div></label>");
          }else{
            $poputData.append("<label class='weui-cell weui-check__label'><div class='weui-cell__bd'><p>"+tmp+"</p></div><div class='weui-cell__ft'><input type='radio' class='weui-check' name='radio1' value='"+i+"'><span class='weui-icon-checked'></span></div></label>");
          }
        });

        $("input[name='radio1']").click(function(){
          doPlay($("input[name='radio1']:checked").val());
        });
      });
      
      //=======player palylist====end====
</script>
  </body>
</html>
